<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>
</head>
<body>
  <h1 class="text-3xl font-bold underline **text-clifford**">
    Hello world!
  </h1>
<div class="grid grid-cols-3 gap-4 place-items-center h-56 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>
<!-- tailwind.config.js -->
module.exports = {
    plugins: [require('@tailwindcss/forms'),]
};

<!-- 视频栏目 -->
<section class="container mx-auto px-4 py-12">
  <h2 class="text-4xl font-bold text-center mb-8">我的视频作品</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <video src="https://cn-gddg-ct-01-22.bilivideo.com/upgcxcode/27/33/26305823327/26305823327-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1730625774&gen=playurlv2&os=bcache&oi=2332639681&trid=0000bf212f8defd0495196ba7dc475b5a75ch&mid=0&platform=html5&og=hw&upsig=ddc7b2c442b715c3cc1547ce3db1c14c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&cdnid=61322&bvc=vod&nettype=0&f=h_0_0&bw=53283&logo=80000000" controls class="w-full"></video>
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900">视频标题</h3>
        <p class="text-gray-700">视频描述内容。</p>
      </div>
    </div>
    <!-- 更多视频项 -->
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <video src="https://cn-gdfs-ct-01-18.bilivideo.com/upgcxcode/62/02/26154110262/26154110262-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1730626009&gen=playurlv2&os=bcache&oi=2332639681&trid=00007f16448a9b404068b60fd8e7254eb7fah&mid=0&platform=html5&og=08&upsig=ca940a510abb5a327b455180c89869a6&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform,og&cdnid=60918&bvc=vod&nettype=0&f=h_0_0&bw=24102&logo=80000000" controls class="w-full"></video>
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900">视频标题</h3>
        <p class="text-gray-700">视频描述内容。</p>
      </div>
    </div>
    <!-- 更多视频项 -->   
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <video src="http://mpvideo.qpic.cn/0bf2puaduaaanaajvzwqprqfa7odhj6qaoqa.f10002.mp4?dis_k=b796d9f1a5b2fc59ea739f546b9c9fec&dis_t=1731159622&play_scene=10600&auth_info=OJW+jLx2ARQa+fewu1FDPT9rSU4wZUcwOWZKbD9AYUFVeW1GBBErImdWaxkSaAQkbmZPGwppcw==&auth_key=208f563e7c22b85c05fe4d6bd0cd313b" controls class="w-full"></video>
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900">视频标题</h3>
        <p class="text-gray-700">视频描述内容。</p>
      </div>
    </div>
    <!-- 更多视频项 -->   
  </div>
</section>

<!-- 图片栏目 -->
<section class="container mx-auto px-4 py-12">
  <h2 class="text-4xl font-bold text-center mb-8">我的图片作品</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <img src="path-to-image.jpg" alt="图片标题" class="w-full">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900">图片标题</h3>
        <p class="text-gray-700">图片描述内容。</p>
      </div>
    </div>
    <!-- 更多图片项 -->
  </div>
</section>

<!-- 图书栏目 -->
<section class="container mx-auto px-4 py-12">
  <h2 class="text-4xl font-bold text-center mb-8">我的图书作品</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white rounded-lg shadow-lg overflow-hidden">
      <img src="path-to-book-cover.jpg" alt="图书标题" class="w-full">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900">图书标题</h3>
        <p class="text-gray-700">图书描述内容。</p>
      </div>
    </div>
    <!-- 更多图书项 -->
  </div>
</section>



<!-- component -->
<div class="overflow-x-hidden bg-gray-100">
    <nav class="px-6 py-4 bg-white shadow">
        <div class="container flex flex-col mx-auto md:flex-row md:items-center md:justify-between">
            <div class="flex items-center justify-between">
                <div>
                    <a href="#" class="text-xl font-bold text-gray-800 md:text-2xl">Brand</a>
                </div>
                <div>
                    <button type="button" class="block text-gray-800 hover:text-gray-600 focus:text-gray-600 focus:outline-none md:hidden">
                        <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                            <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
            <div class="flex-col hidden md:flex md:flex-row md:-mx-4">
                <a href="#" class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0">Home</a>
                <a href="#" class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0">Blog</a>
                <a href="#" class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0">About us</a>
            </div>
        </div>
    </nav>

    <div class="px-6 py-8">
        <div class="container flex justify-between mx-auto">
            <div class="w-full lg:w-8/12">
                <div class="flex items-center justify-between">
                    <h1 class="text-xl font-bold text-gray-700 md:text-2xl">Post</h1>
                    <div>
                        <select class="w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            <option>Latest</option>
                            <option>Last Week</option>
                        </select>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-between"><span class="font-light text-gray-600">Jun 1,
                                2020</span><a href="#"
                                class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500">Laravel</a>
                        </div>
                        <div class="mt-2"><a href="#" class="text-2xl font-bold text-gray-700 hover:underline">Build
                                Your New Idea with Laravel Freamwork.</a>
                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim
                                reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                        </div>
                        <div class="flex items-center justify-between mt-4"><a href="#"
                                class="text-blue-500 hover:underline">Read more</a>
                            <div><a href="#" class="flex items-center"><img
                                        src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                                        alt="avatar" class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block">
                                    <h1 class="font-bold text-gray-700 hover:underline">Alex John</h1>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-between"><span class="font-light text-gray-600">mar 4,
                                2019</span><a href="#"
                                class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500">Design</a>
                        </div>
                        <div class="mt-2"><a href="#"
                                class="text-2xl font-bold text-gray-700 hover:underline">Accessibility tools for
                                designers and developers</a>
                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim
                                reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                        </div>
                        <div class="flex items-center justify-between mt-4"><a href="#"
                                class="text-blue-500 hover:underline">Read more</a>
                            <div><a href="#" class="flex items-center"><img
                                        src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=333&amp;q=80"
                                        alt="avatar" class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block">
                                    <h1 class="font-bold text-gray-700 hover:underline">Jane Doe</h1>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-between"><span class="font-light text-gray-600">Feb 14,
                                2019</span><a href="#"
                                class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500">PHP</a>
                        </div>
                        <div class="mt-2"><a href="#" class="text-2xl font-bold text-gray-700 hover:underline">PHP:
                                Array to Map</a>
                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim
                                reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                        </div>
                        <div class="flex items-center justify-between mt-4"><a href="#"
                                class="text-blue-500 hover:underline">Read more</a>
                            <div><a href="#" class="flex items-center"><img
                                        src="https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=281&amp;q=80"
                                        alt="avatar" class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block">
                                    <h1 class="font-bold text-gray-700 hover:underline">Lisa Way</h1>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-between"><span class="font-light text-gray-600">Dec 23,
                                2018</span><a href="#"
                                class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500">Django</a>
                        </div>
                        <div class="mt-2"><a href="#" class="text-2xl font-bold text-gray-700 hover:underline">Django
                                Dashboard - Learn by Coding</a>
                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim
                                reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                        </div>
                        <div class="flex items-center justify-between mt-4"><a href="#"
                                class="text-blue-500 hover:underline">Read more</a>
                            <div><a href="#" class="flex items-center"><img
                                        src="https://images.unsplash.com/photo-1500757810556-5d600d9b737d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=735&amp;q=80"
                                        alt="avatar" class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block">
                                    <h1 class="font-bold text-gray-700 hover:underline">Steve Matt</h1>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="mt-6">
                    <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-between"><span class="font-light text-gray-600">Mar 10,
                                2018</span><a href="#"
                                class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500">Testing</a>
                        </div>
                        <div class="mt-2"><a href="#" class="text-2xl font-bold text-gray-700 hover:underline">TDD
                                Frist</a>
                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                                Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim
                                reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                        </div>
                        <div class="flex items-center justify-between mt-4"><a href="#"
                                class="text-blue-500 hover:underline">Read more</a>
                            <div><a href="#" class="flex items-center"><img
                                        src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=373&amp;q=80"
                                        alt="avatar" class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block">
                                    <h1 class="font-bold text-gray-700 hover:underline">Khatab Wedaa</h1>
                                </a></div>
                        </div>
                    </div>
                </div>
                <div class="mt-8">
                    <div class="flex">
                        <a href="#" class="px-3 py-2 mx-1 font-medium text-gray-500 bg-white rounded-md cursor-not-allowed">
                            previous
                        </a>
                    
                        <a href="#" class="px-3 py-2 mx-1 font-medium text-gray-700 bg-white rounded-md hover:bg-blue-500 hover:text-white">
                            1
                        </a>
                    
                        <a href="#" class="px-3 py-2 mx-1 font-medium text-gray-700 bg-white rounded-md hover:bg-blue-500 hover:text-white">
                            2
                        </a>
                    
                        <a href="#" class="px-3 py-2 mx-1 font-medium text-gray-700 bg-white rounded-md hover:bg-blue-500 hover:text-white">
                            3
                        </a>
                    
                        <a href="#" class="px-3 py-2 mx-1 font-medium text-gray-700 bg-white rounded-md hover:bg-blue-500 hover:text-white">
                            Next
                        </a>
                    </div>
                </div>
            </div>
            <div class="hidden w-4/12 -mx-8 lg:block">
                <div class="px-8">
                    <h1 class="mb-4 text-xl font-bold text-gray-700">Authors</h1>
                    <div class="flex flex-col max-w-sm px-6 py-4 mx-auto bg-white rounded-lg shadow-md">
                        <ul class="-mx-4">
                            <li class="flex items-center"><img
                                    src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                                    alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full">
                                <p><a href="#" class="mx-1 font-bold text-gray-700 hover:underline">Alex John</a><span
                                        class="text-sm font-light text-gray-700">Created 23 Posts</span></p>
                            </li>
                            <li class="flex items-center mt-6"><img
                                    src="https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=333&amp;q=80"
                                    alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full">
                                <p><a href="#" class="mx-1 font-bold text-gray-700 hover:underline">Jane Doe</a><span
                                        class="text-sm font-light text-gray-700">Created 52 Posts</span></p>
                            </li>
                            <li class="flex items-center mt-6"><img
                                    src="https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=281&amp;q=80"
                                    alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full">
                                <p><a href="#" class="mx-1 font-bold text-gray-700 hover:underline">Lisa Way</a><span
                                        class="text-sm font-light text-gray-700">Created 73 Posts</span></p>
                            </li>
                            <li class="flex items-center mt-6"><img
                                    src="https://images.unsplash.com/photo-1500757810556-5d600d9b737d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=735&amp;q=80"
                                    alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full">
                                <p><a href="#" class="mx-1 font-bold text-gray-700 hover:underline">Steve Matt</a><span
                                        class="text-sm font-light text-gray-700">Created 245 Posts</span></p>
                            </li>
                            <li class="flex items-center mt-6"><img
                                    src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=373&amp;q=80"
                                    alt="avatar" class="object-cover w-10 h-10 mx-4 rounded-full">
                                <p><a href="#" class="mx-1 font-bold text-gray-700 hover:underline">Khatab
                                        Wedaa</a><span class="text-sm font-light text-gray-700">Created 332 Posts</span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="px-8 mt-10">
                    <h1 class="mb-4 text-xl font-bold text-gray-700">Categories</h1>
                    <div class="flex flex-col max-w-sm px-4 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <ul>
                            <li><a href="#" class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">-
                                    AWS</a></li>
                            <li class="mt-2"><a href="#"
                                    class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">-
                                    Laravel</a></li>
                            <li class="mt-2"><a href="#"
                                    class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">- Vue</a>
                            </li>
                            <li class="mt-2"><a href="#"
                                    class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">-
                                    Design</a></li>
                            <li class="flex items-center mt-2"><a href="#"
                                    class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">-
                                    Django</a></li>
                            <li class="flex items-center mt-2"><a href="#"
                                    class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline">- PHP</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="px-8 mt-10">
                    <h1 class="mb-4 text-xl font-bold text-gray-700">Recent Post</h1>
                    <div class="flex flex-col max-w-sm px-8 py-6 mx-auto bg-white rounded-lg shadow-md">
                        <div class="flex items-center justify-center"><a href="#"
                                class="px-2 py-1 text-sm text-green-100 bg-gray-600 rounded hover:bg-gray-500">Laravel</a>
                        </div>
                        <div class="mt-4"><a href="#" class="text-lg font-medium text-gray-700 hover:underline">Build
                                Your New Idea with Laravel Freamwork.</a></div>
                        <div class="flex items-center justify-between mt-4">
                            <div class="flex items-center"><img
                                    src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=731&amp;q=80"
                                    alt="avatar" class="object-cover w-8 h-8 rounded-full"><a href="#"
                                    class="mx-3 text-sm text-gray-700 hover:underline">Alex John</a></div><span
                                class="text-sm font-light text-gray-600">Jun 1, 2020</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="px-6 py-2 text-gray-100 bg-gray-800">
        <div class="container flex flex-col items-center justify-between mx-auto md:flex-row"><a href="#"
                class="text-2xl font-bold">Brand</a>
            <p class="mt-2 md:mt-0">All rights reserved 2020.</p>
            <div class="flex mt-4 mb-2 -mx-2 md:mt-0 md:mb-0"><a href="#"
                    class="mx-2 text-gray-100 hover:text-gray-400"><svg viewBox="0 0 512 512"
                        class="w-4 h-4 fill-current">
                    <path
                        d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z">
                    </path>
                </svg></a><a href="#" class="mx-2 text-gray-100 hover:text-gray-400"><svg viewBox="0 0 512 512"
                    class="w-4 h-4 fill-current">
                    <path
                        d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z">
                    </path>
                </svg></a><a href="#" class="mx-2 text-gray-100 hover:text-gray-400"><svg viewBox="0 0 512 512"
                    class="w-4 h-4 fill-current">
                    <path
                        d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z">
                    </path>
                </svg></a>
            </div>
        </div>
    </footer>
</div>

<!-- component -->
<!-- 底部导航栏 -->
<nav id="bottom-nav" class="fixed inset-x-0 bottom-0 flex justify-between items-center bg-white h-16 shadow-lg px-4 md:hidden">
    <a href="/" class="flex flex-col items-center text-gray-700 hover:text-blue-500 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        <span class="text-xs">首页</span>
    </a>
    <a href="/about" class="flex flex-col items-center text-gray-700 hover:text-blue-500 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="text-xs">关于</span>
    </a>
    <a href="/portfolio" class="flex flex-col items-center text-gray-700 hover:text-blue-500 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
        </svg>
        <span class="text-xs">作品</span>
    </a>
    <a href="/archives" class="flex flex-col items-center text-gray-700 hover:text-blue-500 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
        </svg>
        <span class="text-xs">归档</span>
    </a>
    <a href="/tags" class="text-center text-gray-700 hover:text-blue-500 transition duration-300">
        <svg class="h-6 w-6" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
            <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
        </svg>
        <span class="block text-xs">我的</span>
    </a>
</nav>
    <script>
        let lastScrollY = window.scrollY;
        const elementToHide = document.getElementById('bottom-nav');

        function handleScroll() {
            const currentScrollY = window.scrollY;

            // 检测滚动方向
            if (currentScrollY > lastScrollY) {
                // 向下滑动
                elementToHide.classList.add('scroll-hide-active');
            } else {
                // 向上滑动
                elementToHide.classList.remove('scroll-hide-active');
            }

            lastScrollY = currentScrollY;
        }

        // 监听滚动事件
        window.addEventListener('scroll', handleScroll);
    </script>

<!-- component -->
<div class="flex justify-center items-center min-h-screen">
    <div class="max-w-[720px] mx-auto">
        <div class="block mb-4 mx-auto border-b border-slate-300 pb-2 max-w-[360px]">
            <a 
                target="_blank" 
                href="https://www.material-tailwind.com/docs/html/card" 
                class="block w-full px-4 py-2 text-center text-slate-700 transition-all"
            >
                More components on <b>Material Tailwind</b>.
            </a>
        </div>

        <!-- Centering wrapper -->
        <div class="relative flex flex-col text-gray-700 bg-white shadow-md w-96 rounded-xl bg-clip-border">
            <div class="relative grid mx-4 mb-4 -mt-6 overflow-hidden text-white shadow-lg h-28 place-items-center rounded-xl bg-gradient-to-tr from-gray-900 to-gray-800 bg-clip-border shadow-gray-900/20">
                <h3 class="block font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
                    Sign In
                </h3>
            </div>
            <div class="flex flex-col gap-4 p-6">
                <div class="relative h-11 w-full min-w-[200px]">
                    <input
                        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
                        placeholder=" " />
                    <label
                        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
                        Email
                    </label>
                </div>
                <div class="relative h-11 w-full min-w-[200px]">
                    <input
                        class="w-full h-full px-3 py-3 font-sans text-sm font-normal transition-all bg-transparent border rounded-md peer border-blue-gray-200 border-t-transparent text-blue-gray-700 outline outline-0 placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
                        placeholder=" " />
                    <label
                        class="before:content[' '] after:content[' '] pointer-events-none absolute left-0 -top-1.5 flex h-full w-full select-none !overflow-visible truncate text-[11px] font-normal leading-tight text-gray-500 transition-all before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:border-blue-gray-200 before:transition-all after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:border-blue-gray-200 after:transition-all peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[4.1] peer-placeholder-shown:text-blue-gray-500 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:!border-gray-900 peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:!border-gray-900 peer-disabled:text-transparent peer-disabled:before:border-transparent peer-disabled:after:border-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500">
                        Password
                    </label>
                </div>
                <div class="-ml-2.5">
                    <div class="inline-flex items-center">
                        <label for="checkbox" class="relative flex items-center p-3 rounded-full cursor-pointer">
                            <input type="checkbox"
                                class="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-blue-gray-200 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-blue-gray-500 before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-gray-900 checked:before:bg-gray-900 hover:before:opacity-10"
                                id="checkbox" />
                            <span
                                class="absolute text-white transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 peer-checked:opacity-100">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" viewBox="0 0 20 20"
                                    fill="currentColor" stroke="currentColor" stroke-width="1">
                                    <path fill-rule="evenodd"
                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </span>
                        </label>
                        <label class="mt-px font-light text-gray-700 cursor-pointer select-none" for="checkbox">
                            Remember Me
                        </label>
                    </div>
                </div>
            </div>
            <div class="p-6 pt-0">
                <button
                    class="block w-full select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                    type="button">
                    Sign In
                </button>
                <p class="flex justify-center mt-6 font-sans text-sm antialiased font-light leading-normal text-inherit">
                    Don't have an account?
                    <a href="#signup"
                        class="block ml-1 font-sans text-sm antialiased font-bold leading-normal text-blue-gray-900">
                        Sign up
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>


<!-- component -->

<div class="container mx-auto px-1 py-8">
  <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- 作品项 -->
    <div class="bg-white rounded-lg overflow-hidden shadow-lg">
      <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold">作品标题</h2>
        <p class="text-gray-700 text-sm">作品描述</p>
      </div>
    </div>
    <!-- 重复以上作品项结构，根据需要添加更多作品 -->
    <div class="bg-white rounded-lg overflow-hidden shadow-lg">
      <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80" alt="作品图片">
      <div class="p-4">
        <h2 class="text-lg font-bold">作品标题</h2>
        <p class="text-gray-700 text-sm">作品描述</p>
      </div>
    </div>

  </div>
</div>


<!-- component -->
<div class="flex justify-center items-center min-h-screen">
    <div class="max-w-[720px] mx-auto">
        <div class="block mb-4 mx-auto border-b border-slate-300 pb-2 max-w-[360px]">
            <a 
                target="_blank" 
                href="https://www.material-tailwind.com/docs/html/card" 
                class="block w-full px-4 py-2 text-center text-slate-700 transition-all"
            >
                More components on <b>Material Tailwind</b>.
            </a>
        </div>

        <!-- Centering wrapper -->
        <div class="relative flex flex-col mt-6 text-gray-700 bg-white shadow-md bg-clip-border rounded-xl w-96">
            <div
                class="relative h-56 mx-4 -mt-6 overflow-hidden text-white shadow-lg bg-clip-border rounded-xl bg-blue-gray-500 shadow-blue-gray-500/40">
                <img
                    src="https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=80"
                    alt="card-image" />
            </div>
            <div class="p-6">
                <h5 class="block mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
                    UI/UX Review Check
                </h5>
                <p class="block font-sans text-base antialiased font-light leading-relaxed text-inherit">
                    The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio"
                    where you can enjoy the main night life in Barcelona.
                </p>
            </div>
            <div class="p-6 pt-0">
                <button
                    class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                    type="button">
                    Read More
                </button>
            </div>
        </div>
    </div>
</div>

<!-- component -->



<div class="w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow sm:p-6 md:p-8 dark:bg-gray-800 dark:border-gray-700">
    <form class="space-y-6" action="#">
        <h5 class="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h5>
        <div>
            <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label>
            <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
        </div>
        <div>
            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
            <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
        </div>
        <div class="flex items-start">
            <div class="flex items-start">
                <div class="flex items-center h-5">
                    <input id="remember" type="checkbox" value="" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800" required />
                </div>
                <label for="remember" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Remember me</label>
            </div>
            <a href="#" class="ms-auto text-sm text-blue-700 hover:underline dark:text-blue-500">Lost Password?</a>
        </div>
        <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Login to your account</button>
        <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
            Not registered? <a href="#" class="text-blue-700 hover:underline dark:text-blue-500">Create account</a>
        </div>
    </form>
</div>



<!-- component -->
<div class='flex items-center justify-center min-h-screen'>
	<div class='w-full max-w-lg px-10 py-8 mx-auto bg-[#ff5a00] rounded-lg shadow-xl'>
		<div class='max-w-md mx-auto space-y-6 my-20 px-10'>
			<div class="w-full h-full flex flex-col p-4 bg-black/40 rounded-lg">
				<img src="https://i.scdn.co/image/ab67616d0000b2739e3f258987afca1e41440fb5"/>
				<h1 class="font-semibold text-lg text-white mt-3">Part Of Me</h1>
				<p class="font-semibold text-sm text-gray-200">Spada</p>
				<img class="h-5 w-16 mt-6 filter opacity-60 brightness grayscale invert" src="https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_CMYK_Black.png"/>
			</div>
		</div>
	</div>
</div>
<!-- component -->
<!-- component -->
<div class="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#f2e8cf]">
  <div class="relative mx-auto">
    <div class="group relative flex cursor-pointer after:shadow-lg after:shadow-black">
      <!-- hidden slide -->
      <div class="relative -left-16 top-0 z-10 w-96 rounded-xl bg-[#3d348b] px-5 py-3 text-base font-semibold leading-7 transition-all duration-700 group-hover:-left-14">
        <div class="flex flex-col gap-4">
          <!-- item 1 -->
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.63338 2.58607C4.63338 1.87578 5.20918 1.29999 5.91946 1.29999H18.0806C18.7869 1.29999 19.3667 1.86927 19.3667 2.58352V2.59367V2.60383V2.614V2.62418V2.63437V2.64458V2.65479V2.66502V2.67526V2.68551V2.69577V2.70604V2.71633V2.72662V2.73693V2.74725V2.75758V2.76792V2.77827V2.78863V2.799V2.80939V2.81978V2.83019V2.8406V2.85103V2.86147V2.87192V2.88238V2.89285V2.90333V2.91382V2.92433V2.93484V2.94536V2.9559V2.96644V2.977V2.98757V2.99814V3.00873V3.01933V3.02994V3.04056V3.05119V3.06183V3.07247V3.08313V3.09381V3.10449V3.11518V3.12588V3.13659V3.14731V3.15804V3.16878V3.17953V3.19029V3.20106V3.21184V3.22264V3.23344V3.24425V3.25507V3.2659V3.27674V3.28759V3.29845V3.30931V3.32019V3.33108V3.34198V3.35289V3.3638V3.37473V3.38567V3.39661V3.40757V3.41853V3.4295V3.44049V3.45148V3.46248V3.47349V3.48451V3.49554V3.50658V3.51763V3.52222H19.7778C21.3917 3.52222 22.7001 4.83054 22.7001 6.44444V7.89663C22.7001 9.023 22.0527 10.0491 21.0361 10.5341L18.9681 11.5207C18.903 11.5518 18.8354 11.5719 18.7675 11.5818C17.726 13.9966 15.4297 15.7432 12.7001 16.0005V17.9667H14.5927C15.2249 17.9667 15.8402 18.1717 16.346 18.5511L17.5312 19.44C18.9236 20.4843 18.185 22.7 16.4445 22.7H7.55562C5.81513 22.7 5.07654 20.4843 6.46895 19.44L7.65413 18.5511C8.15996 18.1717 8.77519 17.9667 9.40747 17.9667H11.3001V16.0005C8.57046 15.7432 6.27425 13.9965 5.23266 11.5818C5.16475 11.5719 5.09716 11.5518 5.03197 11.5207L2.964 10.5341C1.9474 10.0491 1.30005 9.023 1.30005 7.89663V6.44444C1.30005 4.83054 2.60837 3.52222 4.22227 3.52222H4.63338V2.58607ZM17.9667 8.66687C17.9667 11.9614 15.2966 14.6321 12.0023 14.6333H12C8.70475 14.6333 6.03338 11.962 6.03338 8.66665V2.69999H17.9667V2.70604V2.71633V2.72662V2.73693V2.74725V2.75758V2.76792V2.77827V2.78863V2.799V2.80939V2.81978V2.83019V2.8406V2.85103V2.86147V2.87192V2.88238V2.89285V2.90333V2.91382V2.92433V2.93484V2.94536V2.9559V2.96644V2.977V2.98757V2.99814V3.00873V3.01933V3.02994V3.04056V3.05119V3.06183V3.07247V3.08313V3.09381V3.10449V3.11518V3.12588V3.13659V3.14731V3.15804V3.16878V3.17953V3.19029V3.20106V3.21184V3.22264V3.23344V3.24425V3.25507V3.2659V3.27674V3.28759V3.29845V3.30931V3.32019V3.33108V3.34198V3.35289V3.3638V3.37473V3.38567V3.39661V3.40757V3.41853V3.4295V3.44049V3.45148V3.46248V3.47349V3.48451V3.49554V3.50658V3.51763V3.52868V3.53975V3.55082V3.56191V3.573V3.5841V3.59521V3.60633V3.61746V3.6286V3.63975V3.6509V3.66206V3.67324V3.68442V3.69561V3.70681V3.71801V3.72923V3.74045V3.75169V3.76293V3.77418V3.78544V3.7967V3.80798V3.81926V3.83056V3.84186V3.85317V3.86448V3.87581V3.88714V3.89848V3.90983V3.92119V3.93256V3.94393V3.95531V3.9667V3.9781V3.98951V4.00092V4.01234V4.02377V4.03521V4.04666V4.05811V4.06957V4.08104V4.09252V4.104V4.11549V4.12699V4.1385V4.15002V4.16154V4.17307V4.18461V4.19615V4.2077V4.21926V4.23083V4.2424V4.25398V4.26557V4.27717V4.28877V4.30038V4.312V4.32363V4.33526V4.3469V4.35854V4.3702V4.38186V4.39353V4.4052V4.41688V4.42857V4.44026V4.45197V4.46368V4.47539V4.48711V4.49884V4.51058V4.52232V4.53407V4.54582V4.55759V4.56936V4.58113V4.59291V4.6047V4.6165V4.6283V4.6401V4.65192V4.66374V4.67556V4.6874V4.69924V4.71108V4.72293V4.73479V4.74665V4.75852V4.7704V4.78228V4.79417V4.80607V4.81797V4.82987V4.84178V4.8537V4.86563V4.87755V4.88949V4.90143V4.91338V4.92533V4.93729V4.94925V4.96122V4.9732V4.98518V4.99717V5.00916V5.02115V5.03316V5.04517V5.05718V5.0692V5.08122V5.09325V5.10529V5.11733V5.12937V5.14142V5.15348V5.16554V5.17761V5.18968V5.20176V5.21384V5.22592V5.23802V5.25011V5.26221V5.27432V5.28643V5.29855V5.31067V5.32279V5.33492V5.34706V5.3592V5.37134V5.38349V5.39565V5.40781V5.41997V5.43214V5.44431V5.45649V5.46867V5.48085V5.49304V5.50524V5.51744V5.52964V5.54185V5.55406V5.56627V5.57849V5.59072V5.60295V5.61518V5.62742V5.63966V5.6519V5.66415V5.6764V5.68866V5.70092V5.71318V5.72545V5.73772V5.75V5.76228V5.77456V5.78685V5.79914V5.81144V5.82373V5.83604V5.84834V5.86065V5.87296V5.88528V5.8976V5.90992V5.92225V5.93458V5.94691V5.95925V5.97159V5.98393V5.99628V6.00863V6.02098V6.03334V6.0457V6.05806V6.07042V6.08279V6.09516V6.10754V6.11992V6.1323V6.14468V6.15707V6.16945V6.18185V6.19424V6.20664V6.21904V6.23144V6.24385V6.25626V6.26867V6.28108V6.2935V6.30591V6.31834V6.33076V6.34319V6.35561V6.36805V6.38048V6.39292V6.40535V6.41779V6.43024V6.44268V6.45513V6.46758V6.48003V6.49248V6.50494V6.5174V6.52986V6.54232V6.55478V6.56725V6.57972V6.59219V6.60466V6.61713V6.62961V6.64208V6.65456V6.66704V6.67953V6.69201V6.7045V6.71698V6.72947V6.74196V6.75445V6.76695V6.77944V6.79194V6.80444V6.81694V6.82944V6.84194V6.85444V6.86695V6.87945V6.89196V6.90447V6.91698V6.92949V6.942V6.95451V6.96703V6.97954V6.99206V7.00458V7.01709V7.02961V7.04213V7.05465V7.06717V7.0797V7.09222V7.10474V7.11727V7.12979V7.14232V7.15485V7.16737V7.1799V7.19243V7.20496V7.21749V7.23002V7.24255V7.25508V7.26761V7.28014V7.29268V7.30521V7.31774V7.33027V7.3428V7.35534V7.36787V7.38041V7.39294V7.40547V7.41801V7.43054V7.44307V7.45561V7.46814V7.48068V7.49321V7.50574V7.51828V7.53081V7.54334V7.55587V7.56841V7.58094V7.59347V7.606V7.61853V7.63106V7.64359V7.65612V7.66865V7.68118V7.69371V7.70624V7.71876V7.73129V7.74381V7.75634V7.76886V7.78139V7.79391V7.80643V7.81895V7.83147V7.84399V7.85651V7.86903V7.88154V7.89406V7.90657V7.91909V7.9316V7.94411V7.95662V7.96913V7.98163V7.99414V8.00665V8.01915V8.03165V8.04415V8.05665V8.06915V8.08165V8.09414V8.10664V8.11913V8.13162V8.14411V8.1566V8.16908V8.18157V8.19405V8.20653V8.21901V8.23149V8.24396V8.25644V8.26891V8.28138V8.29385V8.30631V8.31878V8.33124V8.3437V8.35616V8.36862V8.38107V8.39352V8.40597V8.41842V8.43087V8.44331V8.45575V8.46819V8.48063V8.49306V8.50549V8.51792V8.53035V8.54277V8.55519V8.56761V8.58003V8.59244V8.60486V8.61726V8.62967V8.64207V8.65448V8.66687ZM19.2766 9.82233L20.4333 9.27052C20.9628 9.01788 21.3001 8.48337 21.3001 7.89663V6.44444C21.3001 5.60374 20.6185 4.92222 19.7778 4.92222H19.3667V4.92533V4.93729V4.94925V4.96122V4.9732V4.98518V4.99717V5.00916V5.02115V5.03316V5.04517V5.05718V5.0692V5.08122V5.09325V5.10529V5.11733V5.12937V5.14142V5.15348V5.16554V5.17761V5.18968V5.20176V5.21384V5.22592V5.23802V5.25011V5.26221V5.27432V5.28643V5.29855V5.31067V5.32279V5.33492V5.34706V5.3592V5.37134V5.38349V5.39565V5.40781V5.41997V5.43214V5.44431V5.45649V5.46867V5.48085V5.49304V5.50524V5.51744V5.52964V5.54185V5.55406V5.56627V5.57849V5.59072V5.60295V5.61518V5.62742V5.63966V5.6519V5.66415V5.6764V5.68866V5.70092V5.71318V5.72545V5.73772V5.75V5.76228V5.77456V5.78685V5.79914V5.81144V5.82373V5.83604V5.84834V5.86065V5.87296V5.88528V5.8976V5.90992V5.92225V5.93458V5.94691V5.95925V5.97159V5.98393V5.99628V6.00863V6.02098V6.03334V6.0457V6.05806V6.07042V6.08279V6.09516V6.10754V6.11992V6.1323V6.14468V6.15707V6.16945V6.18185V6.19424V6.20664V6.21904V6.23144V6.24385V6.25626V6.26867V6.28108V6.2935V6.30591V6.31834V6.33076V6.34319V6.35561V6.36805V6.38048V6.39292V6.40535V6.41779V6.43024V6.44268V6.45513V6.46758V6.48003V6.49248V6.50494V6.5174V6.52986V6.54232V6.55478V6.56725V6.57972V6.59219V6.60466V6.61713V6.62961V6.64208V6.65456V6.66704V6.67953V6.69201V6.7045V6.71698V6.72947V6.74196V6.75445V6.76695V6.77944V6.79194V6.80444V6.81694V6.82944V6.84194V6.85444V6.86695V6.87945V6.89196V6.90447V6.91698V6.92949V6.942V6.95451V6.96703V6.97954V6.99206V7.00458V7.01709V7.02961V7.04213V7.05465V7.06717V7.0797V7.09222V7.10474V7.11727V7.12979V7.14232V7.15485V7.16737V7.1799V7.19243V7.20496V7.21749V7.23002V7.24255V7.25508V7.26761V7.28014V7.29268V7.30521V7.31774V7.33027V7.3428V7.35534V7.36787V7.38041V7.39294V7.40547V7.41801V7.43054V7.44307V7.45561V7.46814V7.48068V7.49321V7.50574V7.51828V7.53081V7.54334V7.55587V7.56841V7.58094V7.59347V7.606V7.61853V7.63106V7.64359V7.65612V7.66865V7.68118V7.69371V7.70624V7.71876V7.73129V7.74381V7.75634V7.76886V7.78139V7.79391V7.80643V7.81895V7.83147V7.84399V7.85651V7.86903V7.88154V7.89406V7.90657V7.91909V7.9316V7.94411V7.95662V7.96913V7.98163V7.99414V8.00665V8.01915V8.03165V8.04415V8.05665V8.06915V8.08165V8.09414V8.10664V8.11913V8.13162V8.14411V8.1566V8.16908V8.18157V8.19405V8.20653V8.21901V8.23149V8.24396V8.25644V8.26891V8.28138V8.29385V8.30631V8.31878V8.33124V8.3437V8.35616V8.36862V8.38107V8.39352V8.40597V8.41842V8.43087V8.44331V8.45575V8.46819V8.48063V8.49306V8.50549V8.51792V8.53035V8.54277V8.55519V8.56761V8.58003V8.59244V8.60486V8.61726V8.62967V8.64207V8.65448V8.66687C19.3667 9.05998 19.3359 9.44589 19.2766 9.82233ZM4.63338 8.66665C4.63338 9.05984 4.66419 9.44583 4.72351 9.82235L3.56682 9.27052C3.03727 9.01788 2.70005 8.48337 2.70005 7.89663V6.44444C2.70005 5.60374 3.38157 4.92222 4.22227 4.92222H4.63338V8.66665ZM8.49413 19.6711C8.75763 19.4735 9.0781 19.3667 9.40747 19.3667H12.0001H14.5927C14.922 19.3667 15.2425 19.4735 15.506 19.6711L16.6912 20.56C17.0072 20.797 16.8396 21.3 16.4445 21.3H7.55562C7.16053 21.3 6.99289 20.797 7.30895 20.56L8.49413 19.6711Z" fill="white" />
              <path d="M11.8425 6.20125C11.9226 6.09893 12.0774 6.09893 12.1575 6.20125L12.7183 6.91782C12.7413 6.94724 12.7721 6.96963 12.8072 6.98244L13.662 7.29436C13.7841 7.3389 13.832 7.48617 13.7594 7.59395L13.2512 8.34874C13.2303 8.37973 13.2185 8.41595 13.2172 8.45329L13.1847 9.36265C13.1801 9.49249 13.0548 9.58351 12.9299 9.5478L12.055 9.29771C12.019 9.28744 11.981 9.28744 11.945 9.29771L11.0701 9.5478C10.9452 9.58351 10.8199 9.49249 10.8153 9.36265L10.7828 8.45329C10.7815 8.41595 10.7697 8.37973 10.7488 8.34874L10.2406 7.59395C10.168 7.48617 10.2159 7.3389 10.338 7.29436L11.1928 6.98244C11.2279 6.96963 11.2587 6.94724 11.2817 6.91782L11.8425 6.20125Z" fill="#DF1463" />
            </svg>
            <div class="flex items-center gap-1 rounded-full bg-green-400/45 py-0.5 pl-1 pr-2">
              <p class="-rotate-90 leading-tight text-green-500">&rarr;</p>
              <p class="text-xs leading-tight text-white">10%</p>
            </div>
            <p class="text-white opacity-0 delay-200 duration-700 ease-in-out group-hover:opacity-100">1,300 Goals</p>
          </div>
          <!-- item 2 -->
          <div class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none">
              <path d="M3.7644 13.3726V11.0849C3.7644 6.53663 7.45154 2.84949 11.9999 2.84949V2.84949C16.5482 2.84949 20.2353 6.53663 20.2353 11.0849V13.9856" stroke="#DF1463" stroke-width="1.69904" />
              <path d="M2.84937 17.4903V16.1566C2.84937 14.1351 4.4881 12.4964 6.50957 12.4964C7.5203 12.4964 8.33967 13.3158 8.33967 14.3265V19.3204C8.33967 20.3311 7.5203 21.1505 6.50957 21.1505C4.4881 21.1505 2.84937 19.5118 2.84937 17.4903Z" stroke="white" stroke-width="1.69904" />
              <path d="M21.1504 17.4903V16.1566C21.1504 14.1351 19.5117 12.4964 17.4902 12.4964C16.4795 12.4964 15.6601 13.3158 15.6601 14.3265V19.3204C15.6601 20.3311 16.4795 21.1505 17.4902 21.1505C19.5117 21.1505 21.1504 19.5118 21.1504 17.4903Z" stroke="white" stroke-width="1.69904" />
            </svg>
            <div class="flex items-center gap-1 rounded-full bg-green-400/45 py-0.5 pl-1 pr-2">
              <p class="-rotate-90 leading-tight text-green-500">&rarr;</p>
              <p class="text-xs leading-tight text-white">30%</p>
            </div>
            <p class="text-white opacity-0 delay-200 duration-700 ease-in-out group-hover:opacity-100">30 Records</p>
          </div>
          <p>
            <a href="https://tailwindcss.com/docs" class="text-sky-500 opacity-0 hover:text-sky-600">&rarr;</a>
          </p>
        </div>
      </div>
      <!-- main -->
      <div class="absolute -right-16 top-0 z-20 flex w-96 flex-col gap-4 self-end rounded-xl rounded-l-2xl border-none bg-[#7678ed] px-5 py-3 text-base font-semibold leading-7 transition-all duration-700 group-hover:-right-14 group-hover:w-64 group-hover:rounded-l-lg">
        <p class="text-[#fff]">Achivements unlocked</p>
        <p class="text-[#fff]">Records sold</p>
        <p>
          <a href="https://tailwindcss.com/docs" class="text-white/50">Learn more &rarr;</a>
        </p>
      </div>
      <div class="h-16 bg-[#3d348b] w-[28rem] -left-10 shadow-2xl shadow-[#3d348b] absolute bottom-0"></div>
    </div>
  </div>
</div>


<!-- component -->
<div class="flex items-center justify-center py-8 px-4">
<!--- more free and premium Tailwind CSS components at https://tailwinduikit.com/ --->

            <div class="max-w-sm w-full shadow-lg">
                <div class="md:p-8 p-5 dark:bg-gray-800 bg-white rounded-t">
                    <div class="px-4 flex items-center justify-between">
                        <span  tabindex="0" class="focus:outline-none  text-base font-bold dark:text-gray-100 text-gray-800">October 2020</span>
                        <div class="flex items-center">
                            <button aria-label="calendar backward" class="focus:text-gray-400 hover:text-gray-400 text-gray-800 dark:text-gray-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <polyline points="15 6 9 12 15 18" />
                            </svg>
                        </button>
                        <button aria-label="calendar forward" class="focus:text-gray-400 hover:text-gray-400 ml-3 text-gray-800 dark:text-gray-100"> 
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler  icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <polyline points="9 6 15 12 9 18" />
                            </svg>
                        </button>

                        </div>
                    </div>
                    <div class="flex items-center justify-between pt-12 overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Mo</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Tu</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">We</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Th</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Fr</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Sa</p>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="w-full flex justify-center">
                                            <p class="text-base font-medium text-center text-gray-800 dark:text-gray-100">Su</p>
                                        </div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                    </td>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center"></div>
                                    </td>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">1</p>
                                        </div>
                                    </td>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">2</p>
                                        </div>
                                    </td>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">3</p>
                                        </div>
                                    </td>
                                    <td class="pt-6">
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">4</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">5</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">6</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">7</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="w-full h-full">
                                            <div class="flex items-center justify-center w-full rounded-full cursor-pointer">
                                                <a  role="link" tabindex="0" class="focus:outline-none  focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500 text-base w-8 h-8 flex items-center justify-center font-medium text-white bg-indigo-700 rounded-full">8</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">9</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">10</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">11</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">12</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">13</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">14</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">15</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">16</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">17</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">18</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">19</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">20</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">21</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">22</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">23</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">24</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100">25</p>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">26</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">27</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">28</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">29</p>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="px-2 py-2 cursor-pointer flex w-full justify-center">
                                            <p class="text-base text-gray-500 dark:text-gray-100 font-medium">30</p>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="md:py-8 py-5 md:px-16 px-5 dark:bg-gray-700 bg-gray-50 rounded-b">
                    <div class="px-4">
                        <div class="border-b pb-4 border-gray-400 border-dashed">
                            <p class="text-xs font-light leading-3 text-gray-500 dark:text-gray-300">9:00 AM</p>
                            <a tabindex="0" class="focus:outline-none text-lg font-medium leading-5 text-gray-800 dark:text-gray-100 mt-2">Zoom call with design team</a>
                            <p class="text-sm pt-2 leading-4 leading-none text-gray-600 dark:text-gray-300">Discussion on UX sprint and Wireframe review</p>
                        </div>
                        <div class="border-b pb-4 border-gray-400 border-dashed pt-5">
                            <p class="text-xs font-light leading-3 text-gray-500 dark:text-gray-300">10:00 AM</p>
                            <a tabindex="0" class="focus:outline-none text-lg font-medium leading-5 text-gray-800 dark:text-gray-100 mt-2">Orientation session with new hires</a>
                        </div>
                        <div class="border-b pb-4 border-gray-400 border-dashed pt-5">
                            <p class="text-xs font-light leading-3 text-gray-500 dark:text-gray-300">9:00 AM</p>
                            <a tabindex="0" class="focus:outline-none text-lg font-medium leading-5 text-gray-800 dark:text-gray-100 mt-2">Zoom call with design team</a>
                            <p class="text-sm pt-2 leading-4 leading-none text-gray-600 dark:text-gray-300">Discussion on UX sprint and Wireframe review</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


<!-- This is an example component -->
<div class='flex items-center justify-center min-h-screen from-teal-100 via-teal-200 to-teal-500 bg-gradient-to-br'>
    <div class='z-40 overflow-hidden relative bg-transparent transition ease-in-out delay-100 hover:bg-gradient-to-l from-cyan-100 to-teal-50 w-full max-w-lg px-10 py-8 mx-auto bg-white rounded-lg hover:rotate-3 shadow-xl hover:bg-teal-50 hover:rounded-3xl'>
        <div class='max-w-md mx-auto space-y-6'>
            <img src='https://images.pexels.com/photos/25155250/pexels-photo-25155250/free-photo-of-a-boombox-sitting-on-a-concrete-ledge-next-to-the-ocean.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' class='rounded-lg w-full' />
    <div class="animate-bounce absolute w-52 h-52 bg-teal-50 rounded-full -bottom-10 -right-10 -z-10"></div>
    <div class="animate-bounce absolute w-32 h-32 bg-cyan-100 rounded-full -top-10 -left-10 -z-10"></div>
           <p>Lorem Ipsum is simply dummy text of the printing and 
           typesetting industry. Lorem Ipsum has been the industry's standard dummy 
           text ever since the 1500s, when an unknown printer took a galley of type and 
           scrambled it to make a type specimen book.</p>

        <button class="bg-teal-400 p-3 rounded-md text-white hover:bg-teal-500">Show More</button>
    </div>
</div>

</body>
</html>


